<template>
  <div>
    <top-banner
      :bannerConfig="bannerConfig"
      :titleConfig="titleConfig"
    ></top-banner>

    <div class="box zt">
      <!-- 博客作者基本资料 -->
      <user
        slot="center"
        :userData="userData"
        :articleNume="articleNume"
      ></user>
      <!-- 数据表格 -->
      <chart :data="{ userData, articleNume, dateTime }"></chart>
      <!-- 我的项目 -->
      <my-item></my-item>
      <!-- 我的技能 -->
      <my-skill></my-skill>
      <!-- 我的其他技能 -->
      <my-skill-esle :label="articleNume"></my-skill-esle>
      <!-- 个人档案 -->
      <imger></imger>
    </div>
    <div class="box2 zt">
      <my></my>
    </div>
    <footr></footr>
  </div>
</template>
<script>
import topBanner from "components/content/topBanner/TopBanner.vue";

import user from "./childComponents/User";
import chart from "./childComponents/chart.vue";
import myItem from "./childComponents/myItem.vue";
import MySkill from "./childComponents/mySkill.vue";
import MySkillEsle from "./childComponents/mySkillEsle.vue";
import imger from "./childComponents/img.vue";
import My from "./childComponents/my.vue";

import myTitle from "netWork/MyTitle";
import getLabel from "netWork/getLabel";
import getCalenderDate from "@/netWork/getCalenderDate";
import Footr from '../../components/content/footr/Footr.vue';

export default {
  name: "archives",
  data() {
    return {
      //banner设置
      bannerConfig: {
        hei: "700px",
      },
      //标题展示设置
      titleConfig: {
        but: false,
        contact: false,
      },
      //用户信息
      userData: {},
      // 博客个数
      articleNume: {},
      // 提交时间段
      dateTime: {},
    };
  },
  components: {
    topBanner,
    user,
    chart,
    myItem,
    MySkill,
    MySkillEsle,
    imger,
    My,
    Footr,
  },
  created() {
    //获取博客标题主要信息
    myTitle().then((res) => {
      this.userData = res.data[0];
      this.userData.motto = JSON.parse(res.data[0].motto);
    });
    //获取博文篇数
    getLabel().then((res) => {
      this.articleNume = res.data;
    });
    //获取博客上传时间
    getCalenderDate().then((res) => {
      this.dateTime = res.data;
    });
  },
};
</script>
<style scoped>
.box {
  position: relative;
  margin-top: -60px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: #fff;
  padding: 0 10px;
}
.box2 {
  margin-top: -40px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: #fff;
  padding: 0 10px;
}
</style>